<template>
  <view class="page_min_height px-12 page_pb page_bg">
    <!-- 搜索栏 -->
    <view class="py-12">
      <view
        class="flex justify-between items-center px-12 py-8 border border-solid border-blue-400 rounded-full"
        @click="toSearch"
      >
        <uni-icons type="search" size="32rpx" />
        <view class="flex-1 ml-10 text-gray-400">搜索模板</view>
      </view>
    </view>
    <!-- 轮播图 -->
    <view class="rounded-md overflow-hidden">
      <uni-swiper-dot :info="bannerList" :current="current">
        <swiper class="h-120" autoplay @change="swiperChange">
          <swiper-item v-for="(url, index) in bannerList" :key="index">
            <image class="w-full h-120" :src="url" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <view class="mt-12 py-12 bg-white rounded-md">
      <!-- 精选服务 -->
      <view class="px-12">
        <view class="text-base font-bold">精选服务</view>
        <view class="flex justify-between items-center gap-x-12 mt-12">
          <navigator
            class="flex-1 px-12 py-8 last:mr-0 inline-block border border-solid border-gray-200 rounded-md"
            url="/pages/contract/review/add"
            hover-class="none"
          >
            <view class="flex items-center">
              <image class="w-20 h-20" src="/static/images/review.png" mode="aspectFill" />
              <view class="flex-1 ml-4 font-bold">合同审查</view>
            </view>
            <view class="mt-8 text-xs text-gray-500 line-clamp-2 whitespace-normal">
              审核买卖合同、租赁合同、离婚协议等各类合同协议
            </view>
          </navigator>
          <navigator
            class="flex-1 px-12 py-8 last:mr-0 inline-block border border-solid border-gray-200 rounded-md"
            url="/pages/contract/write/add"
            hover-class="none"
          >
            <view class="flex items-center">
              <image class="w-20 h-20" src="/static/images/write.png" mode="aspectFill" />
              <view class="flex-1 ml-4 font-bold">合同代写</view>
            </view>
            <view class="mt-8 text-xs text-gray-500 line-clamp-2 whitespace-normal">
              代拟买卖合同、租赁合同、离婚协议等各类合同协议
            </view>
          </navigator>
        </view>
      </view>
    </view>
    <view class="mt-12 bg-white rounded-md">
      <!-- 合同模板 -->
      <view class="p-12 sticky top-0 bg-white border-b border-solid border-gray-100 z-[999]">
        <view class="flex justify-between items-center">
          <view class="text-base font-bold">合同模板</view>
          <view class="text-xs text-orange-500">会员可免费下载</view>
        </view>
        <scroll-view
          class="mt-12 whitespace-nowrap overflow-x-auto"
          :scroll-x="true"
          :enhanced="true"
          :show-scrollbar="false"
        >
          <view
            v-for="item in categoryList"
            :key="item.id"
            class="px-18 py-6 mr-12 inline-block last:mr-0"
            :class="{ 'bg-blue-100 text-blue-600 rounded-full': item.id === pageParams.category_id }"
            @click="changeCategory(item.id)"
          >
            <text>{{ item.name }}</text>
          </view>
        </scroll-view>
      </view>
      <DataLoading v-if="loading" />
      <template v-else>
        <template v-if="dataList.length">
          <ContractTemplateList :dataList="dataList" />
        </template>
        <EmptyData v-else />
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { getTemplateCategoryApi, getTemplateListApi } from '@/api/contract';
import { usePage } from '@/utils/usePublic';
import ContractTemplateList from '@/components/ContractTemplateList.vue';

const loading = ref(true);
const pageParams = usePage({
  category_id: 0,
});

const bannerList = ref(['/static/images/banner.png', '/static/images/banner.png']);
const current = ref(0);
// 合同类别
const categoryList = ref([{ id: 0, name: '全部' }]);

onLoad(async () => {
  // 获取合同类别
  const { code, data } = await getTemplateCategoryApi({ page: 1, limit: 20 });
  if (code === 200) {
    categoryList.value = categoryList.value.concat(data.list);
  }
  getTemplateList();
});

onReachBottom(() => {
  if (pageParams.isLoadAll) {
    return;
  }
  pageParams.page++;
  getTemplateList();
});

// 切换轮播图
function swiperChange(e) {
  current.value = e.detail.current;
}
// 获取合同模板列表
const dataList = ref([]);
async function getTemplateList() {
  try {
    const { code, data } = await getTemplateListApi({
      ...pageParams,
    });
    loading.value = false;
    if (code === 200) {
      dataList.value = dataList.value.concat(data.list);
      pageParams.isLoadAll = data.list.length < pageParams.limit;
    }
  } catch (e) {
    loading.value = false;
    console.error(e);
  }
}
//  切换模板类别
function changeCategory(id) {
  loading.value = true;
  pageParams.category_id = id;
  pageParams.page = 1;
  dataList.value = [];
  getTemplateList();
}
// 搜索
function toSearch() {
  uni.navigateTo({
    url: '/pages/search/index',
  });
}
</script>
